<template>
  <div>
    <ZgCard title="文件监控">
      <template slot="extra">
        <div v-if="hasInit" class="flx-e">
          <a-input class="w300 mr10" v-model.trim="filePath" placeholder="请输入监控文件的地址"/>
          <a-dropdown>
            <a-menu slot="overlay">
              <a-menu-item key="1" @click.native="addWatch"> <i class="fa fa-play-circle-o mr5"/>执行监控 </a-menu-item>
              <!--<a-menu-item key="2" @click.native="listWatch"> <i class="fa fa-search mr5"/>查看监控内容 </a-menu-item>-->
              <a-menu-item key="3" @click.native="stopWatch"> <i class="fa fa-pause-circle-o mr5"/>停止监控 </a-menu-item>
            </a-menu>
            <a-button class="mr10">
              操作
            </a-button>
          </a-dropdown>
          <a-input-search
            class="w160 ibk"
            v-model="times"
            placeholder="请输入写入次数"
            @search="doRandomWrite"
          >
            <template #enterButton>
              <a-button>{{ writing?'正在写入..':'随机写文件' }}</a-button>
            </template>
          </a-input-search>
        </div>
      </template>
      <div v-if="hasInit">
        <div
          ref="box"
          class="fs14 pd10 wfull scroll white"
          style="background:#000;box-sizing:border-box"
          :style="{
            height:`${winHeight-280}px`
          }">
          <div v-for="(m,i) in msgList" :key="`msg${i}`">
            <span v-if="m.lineNo===0" class="error">{{ m.lineMsg }}</span>
            <span v-else>【{{ m.lineNo }}】 {{ m.lineMsg }}</span>
          </div>
        </div>
      </div>
      <div v-else>
        <ZgEmpty>还未建立WebSocket连接</ZgEmpty>
      </div>
    </ZgCard>
  </div>
</template>

<script>
import WebSocketClient from '@/core/push.js'
export default {
  data () {
    return {
      handler: null,
      times: 5,
      writing: false,
      watchCode: 'test',
      clientId: 'logMoniter',
      hasInit: false,
      msgList: [],
      filePath: 'D:\\zxb\\workspace\\framework\\back\\test.txt'
    }
  },
  mounted () {
    if (this.handler) {
      this.handler.close()
    }
    this.handler = new WebSocketClient()
    this.handler.conn(this.clientId, msg => {
      if (msg.startsWith('WatchData:')) {
        const data = JSON.parse(msg.substring(10))
        const arr = this.msgList.filter(t => {
          return t.lineNo === data.lineNo
        })
        if (arr.length === 0) {
          this.msgList.push(data)
        }
      } else if (msg.startsWith('WatchMsg:')) {
        this.msgList.push({
          lineNo: 0,
          lineMsg: msg.substring(9)
        })
      }
      this.scrollToBottom()
    }, () => {
      this.hasInit = true
    })
  },
  destroyed () {
    if (this.handler) {
      this.handler.close()
    }
  },
  methods: {
    listWatch () {
      this.$http.get('/un/watch/list', {}, (data) => {
        alert(JSON.stringify(data))
      })
    },
    addWatch () {
      if (this.filePath.length === 0) {
        this.$warning({ title: '请输入要监控的文件地址' })
        return
      }
      this.$http.post('/un/watch/start', {
        code: this.watchCode,
        clientId: this.clientId,
        filePath: this.filePath
      }, () => {
      })
    },
    stopWatch () {
      this.$http.post('/un/watch/stop', {
        code: this.watchCode,
        clientId: this.clientId
      }, () => {
      })
    },
    scrollToBottom () {
      const box = this.$refs.box
      if (box) {
        this.$nextTick(() => {
          box.scrollTop = box.scrollHeight
        })
      }
    },
    doRandomWrite () {
      this.writing = true
      this.$http.post('/un/watch/test', {
        filePath: this.filePath,
        times: this.times
      }, () => {
        this.writing = false
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
